import beautifier from 'js-beautify'

export const beautifierConf = {
    html: {
        indent_size: '2',
        indent_char: ' ',
        max_preserve_newlines: '-1',
        preserve_newlines: false,
        keep_array_indentation: false,
        break_chained_methods: false,
        indent_scripts: 'separate',
        brace_style: 'end-expand',
        space_before_conditional: true,
        unescape_strings: false,
        jslint_happy: false,
        end_with_newline: true,
        wrap_line_length: '110',
        indent_inner_html: true,
        comma_first: false,
        e4x: true,
        indent_empty_lines: true
    },
    js: {
        indent_size: '2',
        indent_char: ' ',
        max_preserve_newlines: '-1',
        preserve_newlines: false,
        keep_array_indentation: false,
        break_chained_methods: false,
        indent_scripts: 'normal',
        brace_style: 'end-expand',
        space_before_conditional: true,
        unescape_strings: false,
        jslint_happy: true,
        end_with_newline: true,
        wrap_line_length: '110',
        indent_inner_html: true,
        comma_first: false,
        e4x: true,
        indent_empty_lines: true
    }
}

export function elInput(formParams, childData) {
    return `
  <el-col :span="${childData.colSpan}">
    <el-form-item label="${childData.labelText}" prop="${childData.prop}">
      <el-input v-model="ruleForm.${childData.prop}" :disabled="${formParams.disabled||childData.disabled}" :clearable="${childData.orderParam.isClearable}" placeholder="${childData.placeholder}" />
    </el-form-item>
  </el-col>
  `
}
export function elInputNumber(formParams, childData) {
    return `
  <el-col :span="${childData.colSpan}">
    <el-form-item label="${childData.labelText}" prop="${childData.prop}">
      <el-input-number v-model="ruleForm.${childData.prop}" :disabled="${formParams.disabled||childData.disabled}" :min="1"  :max="${childData.orderParam.maxlength}" placeholder="${childData.placeholder}" />
    </el-form-item>
  </el-col>
  `
}
export function elTextArea(formParams, childData) {
    return `
  <el-col :span="${childData.colSpan}">
    <el-form-item label="${childData.labelText}" prop="${childData.prop}">
      <el-input v-model="ruleForm.${childData.prop}" resize="none" type="textarea" :disabled="${formParams.disabled||childData.disabled}" :clearable="${childData.orderParam.isClearable}" placeholder="${childData.placeholder}" />
    </el-form-item>
  </el-col>
  `
}
export function elSelectRadio(formParams, childData) {
    return `
  <el-col :span="${childData.colSpan}">
    <el-form-item label="${childData.labelText}" prop="${childData.prop}">
      <el-select v-model="ruleForm.${childData.prop}" :disabled="${formParams.disabled||childData.disabled}" :filterable="${childData.orderParam.isFilterable}" :clearable="${childData.orderParam.isClearable}" placeholder="${childData.placeholder}" >
        <el-option label="选项一" value="1"></el-option>
        <el-option label="选项二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  `
}
export function elSelectMultiple(formParams, childData) {
    return `
  <el-col :span="${childData.colSpan}">
    <el-form-item label="${childData.labelText}" prop="${childData.prop}">
      <el-select v-model="ruleForm.${childData.prop}" multiple collapse-tags :disabled="${formParams.disabled||childData.disabled}" ::filterable="${childData.orderParam.isFilterable}" :clearable="${childData.orderParam.isClearable}" placeholder="${childData.placeholder}" >
        <el-option label="选项一" value="1"></el-option>
        <el-option label="选项二" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  `
}
export function elButtonRadio(formParams, childData) {
    if (childData.styleType == 'default') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-radio-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-radio :label="1">一般</el-radio>
          <el-radio :label="2">良好</el-radio>
          <el-radio :label="3">优秀</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    `
    }
    if (childData.styleType == 'border') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-radio-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-radio :label="1" border>一般</el-radio>
          <el-radio :label="2" border>良好</el-radio>
          <el-radio :label="3" border>优秀</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    `
    }
    if (childData.styleType == 'botton') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-radio-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-radio-botton :label="1">一般</el-radio-botton>
          <el-radio-botton :label="2">良好</el-radio-botton>
          <el-radio-botton :label="3">优秀</el-radio-botton>
        </el-radio-group>
      </el-form-item>
    </el-col>
    `
    }
}
export function elButtonCheckbox(formParams, childData) {
    if (childData.styleType == 'default') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-checkbox-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-checkbox :label="1">一般</el-checkbox>
          <el-checkbox :label="2">良好</el-checkbox>
          <el-checkbox :label="3">优秀</el-checkbox>
          <el-checkbox :label="4">超赞</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-col>
    `
    }
    if (childData.styleType == 'border') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-checkbox-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-checkbox :label="1" border>一般</el-checkbox>
          <el-checkbox :label="2" border>良好</el-checkbox>
          <el-checkbox :label="3" border>优秀</el-checkbox>
          <el-checkbox :label="4" border>超赞</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-col>
    `
    }
    if (childData.styleType == 'botton') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-checkbox-group v-model="ruleForm.${childData.prop}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
          <el-checkbox-botton :label="1">一般</el-checkbox-botton>
          <el-checkbox-botton :label="2">良好</el-checkbox-botton>
          <el-checkbox-botton :label="3">优秀</el-checkbox-botton>
          <el-checkbox-botton :label="4">超赞</el-checkbox-botton>
        </el-checkbox-group>
      </el-form-item>
    </el-col>
    `
    }
}
export function elDatePicker(formParams, childData) {
    if (childData.styleType == 'date') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-date-picker v-model="ruleForm.${childData.prop}" type="date" :disabled="${formParams.disabled||childData.disabled}" :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="${childData.placeholder}" >
        </el-date-picker>
      </el-form-item>
    </el-col>
    `
    }
    if (childData.styleType == 'datetime') {
        return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-date-picker v-model="ruleForm.${childData.prop}" type="datetime" :disabled="${formParams.disabled||childData.disabled}" :editable="false" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="${childData.placeholder}" >
        </el-date-picker>
      </el-form-item>
    </el-col>
    `
    }
}
export function elDateRange(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-date-picker v-model="ruleForm.${childData.prop}" type="daterange" :disabled="${formParams.disabled||childData.disabled}" :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="${childData.placeholder}" >
        </el-date-picker>
      </el-form-item>
    </el-col>
    `
}
export function elCascader(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-cascader v-model="ruleForm.${childData.prop}" :options="[]" :props="{ multiple: ${childData.orderParam.isMultiple}, checkStrictly: ${childData.orderParam.isStrictly}  }" :disabled="${formParams.disabled||childData.disabled}" collapse-tags ::filterable="${childData.orderParam.isFilterable}" :clearable="${childData.orderParam.isClearable}" placeholder="${childData.placeholder}" >
        </el-cascader>
      </el-form-item>
    </el-col>
    `
}
export function elUploadFile(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-upload  action='https://jsonplaceholder.typicode.com/posts/'  :disabled="${formParams.disabled||childData.disabled}" :accept="${childData.orderParam.accept.join(',')}" :file-list="[]"  >
          <el-button type="primary" plain size="${formParams.size}" :disabled="${formParams.disabled||childData.disabled}" >文件大小不超过${childData.orderParam.maxLength}M</el-button>
        </el-upload>
      </el-form-item>
    </el-col>
    `
}
export function elUploadImage(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-upload  action='https://jsonplaceholder.typicode.com/posts/' list-type='picture-card' :limit="1" :show-file-list="false" :disabled="${formParams.disabled||childData.disabled}" :accept=".png,.jpg" :file-list="[]"  >
            <el-icon class="avatar-uploader-icon">
                <plus />
            </el-icon>
        </el-upload>
      </el-form-item>
    </el-col>
    `
}
export function elRate(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-rate v-model="ruleForm.${childData.prop}" :show-text="${childData.isText}" :texts='${JSON.stringify(childData.texts)}' :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
        </el-rate>
      </el-form-item>
    </el-col>
    `
}
export function elSwitch(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-switch v-model="ruleForm.${childData.prop}" :active-text="${childData.orderParam.activeText}" :inactive-tex="${childData.orderParam.inactiveText}" active-color="#13ce66" inactive-color="#ff4949" :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
        </el-switch>
      </el-form-item>
    </el-col>
    `
}
export function elSlider(formParams, childData) {
    return `
    <el-col :span="${childData.colSpan}">
      <el-form-item label="${childData.labelText}" prop="${childData.prop}">
        <el-slider v-model="ruleForm.${childData.prop}" :step="${childData.orderParam.step}" :min="${childData.orderParam.min}"  :min="${childData.orderParam.max}"  :disabled="${formParams.disabled||childData.disabled}" placeholder="${childData.placeholder}" >
        </el-slider>
      </el-form-item>
    </el-col>
    `
}

export function formatTable(dataForm) {
    let elTableColumnStr = ""
    dataForm.components.forEach((element) => {
        elTableColumnStr += `
            <el-table-column label="${element.labelText}" align="center" />
        `
    });
    return elTableColumnStr
}


export function formatElComponents(dataForm) {
    let elComponentStr = ""
    dataForm.components.forEach((element) => {
        if (element.type == 'Input') {
            elComponentStr += elInput(dataForm.formParams, element)
        }
        if (element.type == 'InputNumber') {
            elComponentStr += elInputNumber(dataForm.formParams, element)
        }
        if (element.type == 'Textarea') {
            elComponentStr += elTextArea(dataForm.formParams, element)
        }
        if (element.type == 'SelectRadio') {
            elComponentStr += elSelectRadio(dataForm.formParams, element)
        }
        if (element.type == 'SelectMultiple') {
            elComponentStr += elSelectMultiple(dataForm.formParams, element)
        }
        if (element.type == 'ButtonRadio') {
            elComponentStr += elButtonRadio(dataForm.formParams, element)
        }
        if (element.type == 'ButtonCheckbox') {
            elComponentStr += elButtonCheckbox(dataForm.formParams, element)
        }
        if (element.type == 'DatePicker') {
            elComponentStr += elDatePicker(dataForm.formParams, element)
        }
        if (element.type == 'DateRange') {
            elComponentStr += elDateRange(dataForm.formParams, element)
        }
        if (element.type == 'Cascader') {
            elComponentStr += elCascader(dataForm.formParams, element)
        }
        if (element.type == 'UploadFile') {
            elComponentStr += elUploadFile(dataForm.formParams, element)
        }
        if (element.type == 'UploadImage') {
            elComponentStr += elUploadImage(dataForm.formParams, element)
        }
        // if(element.type == 'Rate') {
        //   elComponentStr += elRate(dataForm.formParams, element)
        // }
        if (element.type == 'Switch') {
            elComponentStr += elSwitch(dataForm.formParams, element)
        }
        if (element.type == 'Slider') {
            elComponentStr += elSlider(dataForm.formParams, element)
        }
    });
    return elComponentStr
}

export function formatRuleForm(dataForm) {
    let ruleForm = {};
    dataForm.components.forEach((element) => {
        if (element.type == 'Input' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'InputNumber' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'Textarea' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'SelectRadio' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'SelectMultiple' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'ButtonRadio' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'ButtonCheckbox' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'DatePicker' && element.isRequired) {
            ruleForm[element.prop] = "";
        }
        if (element.type == 'DateRange' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'Cascader' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'UploadFile' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'UploadImage' && element.isRequired) {
            ruleForm[element.prop] = [];
        }
        if (element.type == 'Rate' && element.isRequired) {
            ruleForm[element.prop] = 0;
        }
        if (element.type == 'Switch' && element.isRequired) {
            ruleForm[element.prop] = true;
        }
        if (element.type == 'Slider' && element.isRequired) {
            ruleForm[element.prop] = true;
        }
    });
    return JSON.stringify(ruleForm)
}

export function formatRules(dataForm) {
    let rules = {};
    dataForm.components.forEach((element) => {
        if (element.type == 'Input' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请输入${element.labelText}`,
                trigger: 'blur'
            }];
        }
        if (element.type == 'InputNumber' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请输入${element.labelText}`,
                trigger: 'blur'
            }];
        }
        if (element.type == 'Textarea' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请输入${element.labelText}`,
                trigger: 'blur'
            }];
        }
        if (element.type == 'SelectRadio' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'SelectMultiple' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'ButtonRadio' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'ButtonCheckbox' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'DatePicker' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'DateRange' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'Cascader' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'UploadFile' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'UploadImage' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'Rate' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'Switch' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
        if (element.type == 'Slider' && element.isRequired) {
            rules[element.prop] = [{
                required: true,
                message: `请选择${element.labelText}`,
                trigger: 'change'
            }];
        }
    });
    return JSON.stringify(rules)
}



export function careateFormHtml(elComponentStr, ruleFormStr, rulesStr, formParams) {

    let stringHtml = `<template>
    <el-dialog
        v-model="isDialog"
        title="新增"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="${formParams.labelWidth}"
          class="downFileForm"
          size="${formParams.size}"
        >
          <el-row :gutter="15">
            ${elComponentStr}
          </el-row>
          
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
      
    <script setup>
        const { proxy } = getCurrentInstance();
        const emit = defineEmits(["close", "update"]);
        const ruleFormRef = ref(null);
        const state = reactive({
            isDialog: false,
            ruleForm: ${ruleFormStr},
            rules: ${rulesStr},
          });
          const {
            isDialog,
            ruleForm,
            rules
          } = toRefs(state);
          
          // 初始化
          function init() {
            isDialog.value = true;
          };
          // 生成页面
          function handleSubmit()  {
            ruleFormRef.value.validate((valid) => {
              if (valid) {
                emit("update");
              }
            });
          };
          // 初关闭弹框
          function handleClose() {
            emit("close");
          };
          defineExpose({
            init
          });

    </script>`
    return beautifier.html(stringHtml, beautifierConf.html)
}

export function careateTableHtml(elTableColumnStr) {

    let stringHtml = `<template>
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="queryParams.name" :clearable="true" placeholder="名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" :highlight-current-row="true">
            <el-table-column label="序号" align="center" type="index" width="80" />
            ${elTableColumnStr}
            <el-table-column label="操作" align="center" width="150" fixed="right">
                <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination 
            v-show="total > 0" 
            :total="total" 
            v-model:page="queryParams.pageNum" 
            v-model:limit="queryParams.pageSize" 
            @pagination="getList" />
        <DialogEdit ref="DialogEditRef" v-if="isDialogEdit" @close="isDialogEdit=false" @update="getList" />
    </template>
    
    <script>
    const { proxy } = getCurrentInstance();
    const state = reactive({
        loading: false,
        tableData: [],
        isDialogEdit: false,
        total: 0,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            name: undefined
          },
      });
      const {
        loading,
        isDialogEdit,
        tableData,
        total,
        queryParams
      } = toRefs(state);
      
      function getList() {

      }

      function handleQuery() {
        queryParams.value.pageNumber = 1
        getList()
      }

    function resetQuery() {
        proxy.$refs['queryRef'].resetFields()
        getList()
    }

      function handleEdit(row) {
        isDialogEdit.value = true;
        proxy.$nextTick(() => {
            proxy.$refs['DialogEditRef'].init(row, '编辑')
        })
      }

      function handleDelete(row) {
        proxy.$modal
          .confirm('确认删除？')
          .then(function () {
            return delTest({ id: row.id })
          })
          .then((res) => {
            if (res.code == 200) {
              getList()
              proxy.$modal.msgSuccess('删除成功')
            } else {
              proxy.$modal.msgError('删除失败')
            }
          })
      }


    </script>
    `

    return beautifier.html(stringHtml, beautifierConf.html)
}